<script>
import {mapGetters, mapState} from "vuex";

export default {
  name: "NavBar",
  computed: {
    ...mapState("shopcartStore", ["shopcartList"]),
    ...mapState("userStore", ["token"]),
    ...mapGetters("shopcartStore", ["checkAll", "totalPrice", "count"])
  },
  methods: {
    handleChangeAll() {
      this.$store.commit("shopcartStore/changeCheckedAll", this.checkAll ? false : true)
    },
    handleSubmit() {
      if (!this.token) return uni.showToast({icon: "error", title: "请登录", duration: 2000})
    }
  },
}
</script>

<template>
  <view class="navBar">
    <radio color="#c00000" :checked="checkAll&&shopcartList.length!==0" @click="handleChangeAll"></radio>
    <view class="total">合计:
      <text class="price">￥{{ totalPrice }}</text>
    </view>
    <button class="button" @click="handleSubmit">结算({{ count }})</button>
  </view>
</template>

<style scoped lang="scss">

.navBar {
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  border-top: 1px solid #efefef;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10rpx;

  .total {
    flex: 1;
    display: flex;
    justify-content: center;

    .price {
      color: #c00000;
      font-weight: 600;
    }
  }

  .button {
    width: 150rpx;
    height: 60rpx;
    font-size: 25rpx;
    color: #ffffff;
    background-color: #c00000;

  }
}
</style>
